<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品秒杀页面</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}" href="../layui/css/layui.css">
    <script type="text/javascript" th:src="@{/layui/layui.js}" src="../layui/layui.js"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home">
            <i class="layui-icon layui-icon-home"></i>
            <a href="#">首页</a>
        </p>
        <div class="sn-quick-menu">
            <div class="login"><a href="login.html">登录</a></div>
            <div class="sp-cart"><a href="order.html">购物车</a><span>2</span></div>
        </div>
    </div>
</div>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="#" title="母婴商城">
                    <img th:src="@{/img/logo.png}" src="../res/static/img/logo.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form action="" class="layui-form" novalidate>
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                           class="layui-input" placeholder="请输入需要的商品">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input type="hidden" name="" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content content-nav-base datails-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="commodity.html" class="active">所有商品</a>
                    <a href="buytoday.html">今日团购</a>
                    <a href="information.html">母婴资讯</a>
                    <a href="about.html">关于我们</a>
                </div>
            </div>
        </div>
    </div>
    <div class="data-cont-wrap w1200">
        <div class="crumb">
            <a href="javascript:;">首页</a>
            <span>></span>
            <a href="javascript:;">所有商品</a>
            <span>></span>
            <a href="javascript:;">产品详情</a>
        </div>
        <div class="product-intro layui-clear">
            <div class="preview-wrap">
                <a href="javascript:;"><img
                        th:src="${(detail.imgUrl != null && !#strings.isEmpty(detail.imgUrl)) ? detail.imgUrl : '/img/s_img2.jpg'}"
                        src="../res/static/img/s_img2.jpg"></a>
            </div>
            <div class="itemInfo-wrap">
                <from action="" class="layui-form">
                  <input id="killId" th:value="${detail.id}" type="hidden"/>
                    <div class="itemInfo">
                        <p>
                            秒杀开始时间：<span style="color: red" th:text="${#dates.format(detail.startTime,'yyyy-MM-dd HH:mm')}"></span><br/><br/>
                            秒杀结束时间：<span style="color: red" th:text="${#dates.format(detail.endTime,'yyyy-MM-dd HH:mm')}"></span>
                        </p>
                        <div class="title">
                            <h4 th:text="${detail.itemName}"></h4>
                            <span><i class="layui-icon layui-icon-rate-solid"></i>收藏</span>
                        </div>
                        <div class="summary">
                            <p class="reference"><span>参考价</span>
                                <del th:text="${detail.originalPrice}"></del>
                            </p>
                            <p class="activity"><span>活动价</span><strong class="price"
                                                                        th:text="${detail.KillPrice}"><i>￥</i>99.00</strong>
                            </p>
                            <p class="address-box"><span>送&nbsp;&nbsp;&nbsp;&nbsp;至</span><strong class="address">江西&nbsp;&nbsp;南昌&nbsp;&nbsp;东湖区</strong>
                            </p>
                        </div>
                        <div class="choose-attrs">
                            <div class="color layui-clear"><span class="title">库&nbsp;&nbsp;&nbsp;&nbsp;存</span>
                                <div class="color-cont" th:if="${detail.total} gt '0' "><span th:text="${detail.total}" ></span></div>
                              <div class="color-cont" th:if="${detail.total} le '0' "><span style="color: red">库存不足</span></div>
                            </div>
                            <div class="number layui-clear"><span class="title">数&nbsp;&nbsp;&nbsp;&nbsp;量</span>
                                <div class="number-cont"><span>限购</span><input
                                        onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                        onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                        maxlength="4" type="" name=""  value="1" readonly><span>件</span></div>
                            </div>
                        </div>
                        <div class="choose-btns" th:if=" ${detail.canKill} eq '0'">
                            <button class=" layui-btn layui-btn-primary">商品占时不能抢购，原因商品库存不足或不在活动时间内！</button>
                            <button class="layui-btn  layui-btn-danger car-btn"><i
                                    class="layui-icon layui-icon-cart-simple"></i>加入购物车
                            </button>
                        </div>
                        <div class="choose-btns" th:if=" ${detail.canKill} eq '1'">
                            <button class=" layui-btn layui-btn-primary" lay-submit lay-filter="formBtn">立刻抢购
                            </button>
                            <button class="layui-btn  layui-btn-danger car-btn"><i class="layui-icon layui-icon-cart-simple"></i>加入购物车
                            </button>
                        </div>
                    </div>
                </from>
            </div>
        </div>
    </div>
    <div class="layui-clear">
        <div class="aside">
            <h4>热销推荐</h4>
            <div class="item-list">
                <div class="item" th:each="item : ${itemKills}">
                    <img th:src="${(item.imgUrl != null && !#strings.isEmpty(item.imgUrl)) ? item.imgUrl : '/img/s_img2.jpg'}"
                         src="../res/static/img/s_img2.jpg">
                    <p><span th:text="${item.itemName}"></span><span class="pric"
                                                                     th:text="${item.killPrice}"><i>￥</i></span></p>
                </div>
            </div>
        </div>
        <div class="detail">
            <h4>详情</h4>
            <div class="item">
                <img th:src="@{/img/details_imgbig.jpg}" src="../res/static/img/details_imgbig.jpg">
            </div>
        </div>
    </div>
</div>
</div>
<script th:src="@{/plugins/jquery.js}" src="/plugins/jquery.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['mm', 'jquery', 'form'], function () {
        var mm = layui.mm, $ = layui.$;
        var form = layui.form;
        var cur = $('.number-cont input').val();
        $('.number-cont .btn').on('click', function () {
            if ($(this).hasClass('add')) {
                cur++;

            } else {
                if (cur > 1) {
                    cur--;
                }
            }
            $('.number-cont input').val(cur)
        })
       //抢购商品提交抢购表单
        form.on('submit(formBtn)', function (data) {
            $.ajax({
                type: "POST",
                url: "/kill/execute",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(getJsonData()),
                dataType: "json",

                success: function(res){
                    if (res.code==200) {
                        window.location.href="/kill/execute/success"
                    }else{
                        //window.location.href="/kill/execute/fail"
                       layer.alert(res.message);
                    }
                },
                error: function (message) {

                    window.location.href="/kill/execute/fail"
                    return;
                }
            });
        });

      function getJsonData() {
        var killId=$("#killId").val();
       /* var data = {
            "killId":killId,
            "userId":1
        };*/
        var data = {
          "killId":killId
        };
        return data;
      }
    });

</script>


</body>
</html>